import 'package:card_swiper/card_swiper.dart';
import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/constant/constant.dart';
import 'package:distribution_mall_flutter/constant/image_constant.dart';
import 'package:distribution_mall_flutter/constant/point_constant.dart';
import 'package:distribution_mall_flutter/entity/order/order_trce_entity.dart';
import 'package:distribution_mall_flutter/provider/order/order.dart';
import 'package:distribution_mall_flutter/provider/user/login.dart';
import 'package:distribution_mall_flutter/utils/firebase/firebase_analytics_utils.dart';
import 'package:distribution_mall_flutter/utils/image_loader.dart';
import 'package:distribution_mall_flutter/router/router.gr.dart';
import 'package:distribution_mall_flutter/widgets/icon_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';

class Logistics extends ConsumerStatefulWidget {
  const Logistics({super.key});

  @override
  ConsumerState createState() => _Logistics();
}

class _Logistics extends ConsumerState<Logistics> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    List<OrderTraceEntity> trceList =
        ref.watch(orderProvider.select((value) => value.trceList));
    return Visibility(
        visible: trceList.isNotEmpty && ref.watch(loginStateProvider),
        child: Skeleton.leaf(
            child: Container(
          padding: const EdgeInsets.only(top: EdgeConstant.edge10),
          height: 75,
          child: Swiper(
            scrollDirection: Axis.vertical,
            autoplay: trceList.length > 1 ? true : false,
            loop: trceList.length > 1,
            duration: 1000,
            autoplayDelay: 5000,
            itemHeight: 75,
            onTap: (int i) {
              FirebaseAnalyticsUtils.logEvent(name: PointConstant.hpLogistics);
              appRouter.push(OrderLogisticsRoute(
                  state: trceList[i].state ?? '',
                  bizOrderNumber: trceList[i].distributionOrderId ?? ''));
            },
            itemBuilder: (BuildContext context, int index) {
              return Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    height: 75,
                    margin: const EdgeInsets.fromLTRB(
                        EdgeConstant.edge146, 0, EdgeConstant.edge146, 0),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(14.6),
                        border: Border.all(
                          width: 0.9,
                          color: const Color.fromRGBO(255, 114, 10, 1),
                        )),
                    child: Stack(
                      children: [
                        Positioned(
                          bottom: 4,
                          left: 31.4,
                          child: ImageLoader.imageAsset(
                              ImageLocalConstant.homeLogisticsPoint,
                              width: 52.8,
                              height: 5.2,
                              fit: BoxFit.cover),
                        ),
                        Positioned(
                          top: 0,
                          right: 0,
                          bottom: 0,
                          width: 160,
                          child: ClipRRect(
                            borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(14.6),
                              bottomRight: Radius.circular(14.6),
                            ),
                            child: ImageLoader.imageAsset(
                                fit: BoxFit.cover,
                                ImageLocalConstant.homeLogistics),
                          ),
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(14.6),
                          child: Container(
                            padding: const EdgeInsets.fromLTRB(
                                EdgeConstant.edge146, 0, 10, 0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Visibility(
                                        visible: trceList[index]
                                                    .orderGoodsList?[0]
                                                    .mainImage
                                                    ?.isNotEmpty ==
                                                true
                                            ? true
                                            : false,
                                        child: ImageLoader.imageNet(
                                            trceList[index]
                                                    .orderGoodsList?[0]
                                                    .mainImage ??
                                                '',
                                            fit: BoxFit.cover,
                                            width: 36.4,
                                            height: 36.4,
                                            radius: 5.5)),
                                    const SizedBox(
                                      width: 14.6,
                                    ),
                                    Container(
                                      width: 36.4,
                                      height: 36.4,
                                      margin: const EdgeInsets.only(right: 7.6),
                                      alignment: Alignment.center,
                                      decoration: BoxDecoration(
                                          borderRadius: const BorderRadius.all(
                                              Radius.circular(5.5)),
                                          border: Border.all(
                                            color: const Color.fromRGBO(
                                                232, 232, 232, 1),
                                            width: 0.9,
                                          )),
                                      child: Center(
                                        child: ImageLoader.imageAsset(
                                            ImageLocalConstant.logisticeCart,
                                            width: 21.8,
                                            height: 21.8),
                                      ),
                                    ),
                                    Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          trceList[index]
                                                  .routeInfoResult?[0]
                                                  .routeTitle ??
                                              '',
                                          style: const TextStyle(
                                              color:
                                                  Color.fromRGBO(79, 82, 87, 1),
                                              fontSize: 12.7,
                                              letterSpacing: -0.8,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        SizedBox(
                                          width: 100,
                                          child: Text(
                                            trceList[index]
                                                    .routeInfoResult?[0]
                                                    .routeDescription ??
                                                '',
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                                color: Color.fromRGBO(
                                                    134, 141, 150, 1),
                                                fontSize: 9.1),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                Container(
                                  width: 25,
                                  height: 25,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(20)),
                                      boxShadow: [
                                        BoxShadow(
                                            color:
                                                Colors.black.withOpacity(0.1),
                                            blurRadius: 5,
                                            offset: const Offset(0, 2))
                                      ]),
                                  child: const Icon(
                                    Icons.chevron_right,
                                    color: Color.fromRGBO(45, 124, 252, 1),
                                  ),
                                )
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Positioned(
                    left: 9,
                    bottom: -10,
                    child: ImageLoader.imageAsset(
                      ImageLocalConstant.homeCar,
                      width: 34.6,
                      height: 31.9,
                    ),
                  )
                ],
              );
            },
            itemCount: trceList.length,
          ),
        )));
  }
}
